<script>
import sortBy from 'lodash/sortBy';
import packageInfo from '../../package.json';
import logo from '../logo.svg';
import antDesignVue from '../ant-design-vue.svg';

export default {
  props: {
    searchData: Array,
  },
  data() {
    return {
      value: null,
    };
  },
  methods: {
    handleClick() {
      const path = this.$route.path;
      this.$router.push({
        path,
      });
    },
    onSelect(val) {
      this.$router.push(val);
      this.value = val;
    },
  },
  render() {
    const searchData = sortBy(this.searchData, ['title']);
    return (
      <header id="header">
        <a-row>
          <a-col class="header-left" xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
            <router-link to={{ path: '/' }} id="logo">
              <img alt="logo" height="32" src={logo} />
              <img alt="logo" height="16" src={antDesignVue} />
            </router-link>
          </a-col>

          <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
            <div id="search-box">
              <a-icon type="search" />
              <a-select
                ref="selectBox"
                placeholder="搜索组件..."
                style="width: 200px"
                defaultActiveFirstOption={false}
                showArrow={false}
                showSearch
                onSelect={this.onSelect}
                optionFilterProp="children"
                key={this.value}
              >
                {searchData.map(({ title, subtitle, url }) => (
                  <a-select-option key={url}>
                    {title} {subtitle}
                  </a-select-option>
                ))}
              </a-select>
            </div>

            <a-select size="small" defaultValue={packageInfo.version} class="version">
              <a-select-option value={packageInfo.version}>{packageInfo.version}</a-select-option>
            </a-select>

            <a-menu selectedKeys={['components']} mode="horizontal" class="menu-site" id="nav">
              <a-menu-item key="components">组件</a-menu-item>

              <a-sub-menu key="Ecosystem" title="生态系统">
                <a-menu-item key="design">
                  <router-link to={{ path: '/docs/download' }}>设计资源</router-link>
                </a-menu-item>

                <a-menu-item key="vscode">
                  <a
                    target="_blank"
                    href="https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper"
                  >
                    VS Code Extension
                  </a>
                </a-menu-item>

                <a-menu-item key="awesome">
                  <a target="_blank" href="https://github.com/vueComponent/ant-design-vue-awesome">
                    Awesome
                  </a>
                </a-menu-item>

                <a-menu-item key="github">
                  <a target="_blank" href="http://192.168.8.111/wky/ant-design-vue-jzy">
                    GitLab
                  </a>
                </a-menu-item>
              </a-sub-menu>
            </a-menu>
          </a-col>
        </a-row>
      </header>
    );
  },
};
</script>
